<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>

    <div id="app">
        姓名: {{ fullName }}
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                firstName: 'Jack',
                lastName: 'Green'
            },
            computed: {
                fullName: {
                    // getter, 读取时触发
                    get: function () {
                        return this.firstName + ' ' + this.lastName;
                    },

                    // setter, 当 fullName 的值发生变化时触发
                    set: function (newValue) {
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1];
                    }
                }
            }
        });

    </script>

</body>
</html>